<template>
    <div id='CircleMenu'>
        <div :class="type" :animate='animate'>
            <div class="oy-mask-black" v-show="MaskToggle" v-if="mask==='black'" @click="toggle"></div>
            <div class="oy-mask-white" v-show="MaskToggle" v-if="mask==='white'" @click="toggle"></div>
            <el-dialog
                title="您已经赞过"
                :visible.sync="dialogVisible"
                width="30%">
                <span>是否取消重新点赞？</span>
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="removeVote">确 定</el-button>
  </span>
            </el-dialog>
            <div class="oy-menu-group" :class="{'open':open}">
                <button class="oy-menu-btn btn-toggle click icon-item"
                        :class="[{'oy-menu-btn-Circle':circle},defaultColors[show]]"
                        @click="toggle">
                    <i class="icon-bars" v-if="btn"></i>
                    <slot :name="defaultSlot"></slot>
                </button>
                <div class="btn-list">
                    <div class="oy-menu-item oy-menu-item_1 click yellow icon-item"
                         :class="AnimateClass"
                         :style='{background:Item1Color}'
                         @click="vote(1)"
                         v-show="number > 1 && number < 7">
                        <slot name="item_1"></slot>
                    </div>
                    <div class="oy-menu-item oy-menu-item_2 click purple icon-item"
                         :class="AnimateClass"
                         :style='{background:Item2Color}'
                         @click="vote(2)"
                         v-show="number > 1 && number < 7">
                        <slot name="item_2"></slot>
                    </div>
                    <div class="oy-menu-item oy-menu-item_3 click green icon-item"
                         :class="AnimateClass"
                         :style='{background:Item3Color}'
                         @click="vote(3)"
                         v-show="isShow">
                        <slot name="item_3"></slot>
                    </div>
                    <div class="oy-menu-item oy-menu-item_4 click blue icon-item"
                         :class="AnimateClass"
                         :style='{background:Item4Color}'
                         @click="vote(4)"
                         v-show="number > 3">
                        <slot name="item_4"></slot>
                    </div>
                    <div class="oy-menu-item oy-menu-item_5 click orange icon-item"
                         :class="AnimateClass"
                         :style='{background:Item5Color}'
                         @click="vote(5)"
                         v-show="number > 4">
                        <slot name="item_5"></slot>
                    </div>
                    <div class="oy-menu-item oy-menu-item_6 click gray icon-item"
                         :class="AnimateClass"
                         :style='{background:Item6Color}'
                         @click="vote(6)"
                         v-show="number === 6">
                        <slot name="item_6"></slot>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { isColors } from '@/utils/colorDetection'

    export default {
        name: 'CircleMenu',
        props: {
            type: {
                type: String,
                required: true
            },
            number: {
                type: Number,
                required: true
            },
            show: Number,
            animate: String,
            mask: String,
            circle: Boolean,
            btn: Boolean,
            colors: Array
        },
        data () {
            return {
                open: false,
                toggleAnimate: false,
                MaskToggle: false,
                dialogVisible: false,
                defaultColors: ['pink', 'yellow', 'purple', 'green', 'blue', 'orange', 'gray'],
                BtnColor: '',
                Item1Color: '',
                Item2Color: '',
                Item3Color: '',
                Item4Color: '',
                Item5Color: '',
                Item6Color: ''
            }
        },
        methods: {
            toggle () {
                if (this.show && this.show !== 0) {
                    this.dialogVisible = true
                    return
                }
                this.open = !this.open
                this.toggleAnimate = !this.toggleAnimate
                this.MaskToggle = !this.MaskToggle
            },
            vote (type) {
                this.$emit('vote', type)
                this.toggle()
            },
            removeVote () {
                this.dialogVisible = false
                this.$emit('removeVote')
            }
        },
        computed: {
            AnimateClass () {
                return this.toggleAnimate ? this.animate : ''
            },
            isShow () {
                if (this.number === 3 || this.number === 5) {
                    if (this.type === 'middle' || this.type === 'middle-around') {
                        console.error("when type is 'middle' or 'middle-around',this number can not 3 or 5 ---VueCircleMenu")
                    } else {
                        return true
                    }
                }
                return true
            },
            defaultSlot () {
                if (this.show === 0) {
                    return `item_btn`
                }
                return `item_${this.show}`
            },
            defaultColor () {
                if (this.colors) {
                    return this.colors[this.show]
                }
                return this.defaultColors[this.show]
            }
        },
        mounted () {
            if (this.colors) {
                if (this.colors.every(isColors) && this.colors.length === 7) {
                    for (let i = 0, length = this.colors.length; i < length; i++) {
                        this.BtnColor = this.colors[0]
                        this.Item1Color = this.colors[1]
                        this.Item2Color = this.colors[2]
                        this.Item3Color = this.colors[3]
                        this.Item4Color = this.colors[4]
                        this.Item5Color = this.colors[5]
                        this.Item6Color = this.colors[6]
                    }
                } else {
                    console.error('this Array of colors must be hex-color or rgb-color and Array length must be 7 ---VueCircleMenu')
                }
            }
        }
    }
</script>

<style lang="less">
    @import '../../style/circleMenu/index.less';

    .click {
        cursor: pointer;
    }

    .icon-item{
        vertical-align: top;
        display: -webkit-inline-flex;
        justify-content: center;
        align-items: center;
    }
</style>
